{% load i18n %}
{% load django_ledger %}

{% for root_role, role_list in accounts_gb_2 %}
    {% with title=root_role %}
        <div class="table-container">
            <table class="table is-fullwidth is-striped is-narrow is-bordered django-ledger-table-bottom-margin-75">
                <thead>
                {% if title %}
                    <tr>
                        <td><h2 class="is-size-3 has-text-weight-light">{{ title }}</h2></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                {% endif %}
                <tr>
                    <th>{% trans 'Account Name' %}</th>
                    <th>{% trans 'CoA' %}</th>
                    <th>{% trans 'Parent' %}</th>
                    <th>{% trans 'Code' %}</th>
                    <th>{% trans 'Balance Type' %}</th>
                    <th>{% trans 'Active' %}</th>
                    <th>{% trans 'Locked' %}</th>
                    <th>{% trans 'Actions' %}</th>
                </tr>
                </thead>
                <tbody>
                {% for role, acc_list in role_list %}

                    <tr>
                        <td class="has-text-weight-bold">{{ role | upper }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                    {% for account in acc_list %}
                        <tr>
                            <td style="{% if account.is_indented %}padding-left: {{ account.get_html_pixel_indent }};{% endif %}">{{ account.name }}</td>
                            <td>{{ account.coa_model.name }}</td>
                            <td>{% if not account.get_parent.is_coa_root %}{{ account.get_parent }}{% endif %}</td>
                            <td>{{ account.code }}</td>
                            <td>{{ account.get_balance_type_display }}</td>
                            <td class="has-text-centered">
                                {% if account.active %}
                                    <span class="icon has-text-success-dark">
                                        {% icon 'ant-design:check-circle-filled' 24 %}
                                    </span>
                                {% elif not account.active %}
                                    <span class="icon has-text-danger-dark">
                                        {% icon 'mdi:dangerous' 24 %}
                                    </span>
                                {% endif %}
                            </td>

                            <td class="has-text-centered">
                                {% if account.locked %}
                                    <span class="icon has-text-success-dark">
                                        {% icon 'bi:lock-fill' 24 %}
                                    </span>
                                {% elif not account.locked %}
                                    <span class="icon has-text-danger-dark">
                                        {% icon 'bx:bx-lock-open-alt' 24 %}
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="dropdown is-right is-hoverable" id="account-action-{{ account.uuid }}">
                                    <div class="dropdown-trigger">
                                        <button class="button is-small is-rounded is-outlined"
                                                aria-haspopup="true"
                                                aria-controls="dropdown-menu">
                                            <span>{% trans 'Actions' %}</span>
                                            <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu" id="dropdown-menu-{{ account.uuid }}" role="menu">
                                        <div class="dropdown-content">
                                            <a href="{% url 'django_ledger:account-detail' entity_slug=entity_slug account_pk=account.uuid %}"
                                               class="dropdown-item has-text-success">{% trans 'Detail' %}</a>
                                            <a href="{% url 'django_ledger:account-update' entity_slug=entity_slug account_pk=account.uuid %}"
                                               class="dropdown-item has-text-warning">{% trans 'Update' %}</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}

                {% endfor %}


            </table>
        </div>
    {% endwith %}
{% endfor %}

